<div id="shouye">
    <div class="list-btn">
      <el-row :gutter="20">
        <h1>快捷入口</h1>
        <el-col :span="4">
          <router-link to='/queryDisplay/chartDisplay'>
            <el-button type="primary">项目查看</el-button>
          </router-link>
        </el-col>
        <el-col :span="4">
          <router-link to='/planManage/jibenxinxi'>
            <el-button type="primary">项目录入</el-button>
          </router-link>
        </el-col>
        <el-col :span="4">
          <router-link to='/planManage/template'>
            <el-button type="primary">项目模板管理</el-button>
          </router-link>
        </el-col>
        <el-col :span="4">
          <router-link to='/planManage/changePlan'>
            <el-button type="primary">计划变更</el-button>
          </router-link>
        </el-col>
        <el-col :span="4">
          <router-link to='/update/overdue'>
            <el-button type="primary">问题上报</el-button>
          </router-link>
        </el-col>
      </el-row>
    </div>

    <div class="chart">
      <el-col :span="10">
        <h1>通知</h1>
        <el-badge :value="noticenum.data.message" class="item">
          <el-button size="small" @click="mode='消息提醒'">消息提醒</el-button>
        </el-badge>
        <el-badge :value="noticenum.data.todo" class="item" style="margin-left: 20px">
          <el-button size="small" @click="mode='待办事项'">待办事项</el-button>
        </el-badge>
       
        <el-collapse class="notice" v-model="activeNames" accordion>
          <template v-if="mode=='消息提醒'">
            <el-collapse-item v-for="msg in message1"  >
              <template slot="title">
                <div class="tit warning">
                  <i class="header-icon el-icon-warning">{{msg.them}}</i>
                  <span class="date">{{msg.date}}</span>
                  <span class="noticecolor">{{msg.status}}</span>
                </div>
              </template>
              <div class="content">
                <p>{{msg.content}}</p>
              </div>
              <div class="button">
                <el-button type="primary">查看详情</el-button>
              </div>
            </el-collapse-item> 
                    
          </template>
  
          <template v-if="mode=='待办事项'">
            <el-collapse-item v-for="msg in message2">
              <template slot="title">
                <div class="tit info">
                  <i class="header-icon el-icon-info"></i>{{msg.them}}
                  <span class="date">{{msg.date}}</span>
                  <span class="noticecolor">{{msg.status}}</span>
                </div>
              </template>
              <div class="content">
                <p>{{msg.content}}</p>
              </div>
              <div class="button">
                <el-button type="primary">去处理</el-button>
              </div>
            </el-collapse-item>
          </template>
  
        </el-collapse>
        <p></p>
        <el-pagination
        align="center"
          small
          layout="prev, pager, next"
          :total="100">
        </el-pagination>
      </el-col>
      
      <el-col :span="14">
        <h1>项目统计</h1>
        <el-col :span="12">
          <div class="chart" id="echartsFour" ></div>
        </el-col>
        <el-col :span="12">
          <div  class="chart" id="echartsThree" ></div>
        </el-col>
      </el-col>
      
  
    </div>
  </div>
  
  